<template>
  <div class="container">
    <transition :name="routerAni">
      <router-view @caiBaoInvoiceCallBack="caiBaoInvoiceCallBack" class="router-view of-y-s"></router-view>
    </transition>
    <div class="total">
      <div>您本次的住宿费发票合计金额为</div>
      <div class="box box-ac amount">
        <div>¥&nbsp;</div>
        <input v-model="person.zsInvoice.money" v-limit-money readonly class="box-f1" type="number">
      </div>
    </div>
    <div class="tips box">
      <div class="icon icon-invoice-tips"></div>
      <div class="tc-666 box-f1">
        若住宿费报销合计金额超出标准，超标合理部分请到其他费用填写；如多人出差共同一张发票报销、实际住宿费用超标等
      </div>
    </div>
    <div class="invoice">
      <div class="head box box-ac">
        <div @click="selectInvoice()" class="box box-ac">
          <div class="">继续添加</div>
          <div class="icon icon-add-blue"></div>
        </div>
      </div>
      <div class="content w-p100 box box-ver box-ac box-jc">
        <div v-if="person.zsInvoice.list.length === 0" class="no-data box-ver box box-ac box-jc">
          <div @click="selectInvoice()" class="icon icon-invoice-select"></div>
          <div class="text tc-666">从发票包选择发票</div>
        </div>
        <div v-if="person.zsInvoice.list.length > 0" class="invoice-list">
          <swiper class="swiper" :options="swiperOption" ref="invoiceSwiper" @slideChange="initPencent">
            <swiper-slide v-for="(item, index) in person.zsInvoice.list" :value="item" :key="index" class="swiper-slide box box-ac box-jc">
              <div class="invoice-item">
                <div class="head box box-ac box-jc">
                  <div class="title tc-main">增值税{{ item.invoicetype == '01' ? '专用' : '普通' }}发票</div>
                  <div class="date">开票日期：{{item.invoicedate}}</div>
                  <div @click="deleteInvoice(index)" class="icon icon-close"></div>
                </div>
                <div class="invoice-content">
                  <div class="box line">
                    <div class="box box-jc box-ver box-f1 box-fh left">
                      <div>发票号码</div>
                      <div class="tc-999 txt">{{item.invoicenum}}</div>
                    </div>
                    <div class="box box-jc box-ver box-f1 box-fh right">
                      <div>发票代码</div>
                      <div class="tc-999 txt">{{item.invoicecode}}</div>
                    </div>
                  </div>
                  <div class="box line">
                    <div class="box box-jc box-ver box-f1 box-fh left">
                      <div>税率</div>
                      <div class="tc-999 txt">{{getTax(index)}}</div>
                    </div>
                    <div class="box box-jc box-ver box-f1 box-fh right">
                      <div>税额</div>
                      <div class="tc-999 txt">{{((+item.totalamount) - (+item.invoiceamount)) | formatMoney}}</div>
                    </div>
                  </div>
                  <div class="box box-ac line">
                    <span>发票金额&nbsp;&nbsp;</span>
                    <span class="tc-999 txt">¥{{item.totalamount}}</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="num">
            {{slidePencent}}
          </div>
        </div>
      </div>
    </div>
    <popup v-if="showPop" @close="hidePop()">
      您本次报销住宿发票合计金额为{{person.zsInvoice.money}}元，住宿费可报额度{{person.zsBZ}}元，<span class="tc-red">超出标准{{person.zsInvoice.money - person.zsBZ}}元</span>，若要报销此部分请到其他费用填写超标金额和说明。
    </popup>
    <div @click="sure()" class="btn-bot">确定</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getTravelTripStandards } from '@/assets/js/api'
import { countDate } from '@/assets/js/common'
import popup from '@/components/popup.vue'
export default {
  name: 'caiBaoFeeZuSu',
  components: {
    swiper, swiperSlide, popup
  },
  data () {
    return {
      swiperOption: {},
      slidePencent: '',
      showPop: false,
      person: {
        zsInvoice: {
          num: 0,
          money: 0,
          list: []
        },
        zsTotal: ''
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.invoiceSwiper.swiper
    },
    ...mapState(['bizAccountBill', 'routerAni'])
  },
  created () {
    this.init()
  },
  methods: {
    hidePop () {
      this.showPop = false
      this.bizAccountBill.marchInfos[this.billIndex].travelPerson[this.personIndex] = this.person
      this.$store.commit('bizAccountBill', {
        marchInfos: this.bizAccountBill.marchInfos
      })
      this.$router.go(-1)
    },
    getTax (index) {
      let invoiceItem = this.person.zsInvoice.list[index]
      // console.log(invoiceItem)
      if (invoiceItem.detailsl) {
        return invoiceItem.detailsl
      } else {
        let detailsl = Math.round(((+invoiceItem.totalamount) / (+invoiceItem.invoiceamount) - 1) * 100) + '%'
        this.person.zsInvoice.list[index].detailsl = detailsl
        this.person.zsInvoice.list[index].detailse = ((+invoiceItem.totalamount) - (+invoiceItem.invoiceamount) + '')
        return detailsl
      }
    },
    sure () {
      let zsBZ = this.bizAccountBill.marchInfos[this.billIndex].travelPerson[this.personIndex].zsBZ

      if (+this.person.zsInvoice.money > +zsBZ) {
        this.person.zsTotal = zsBZ
        this.showPop = true
      } else {
        this.person.zsTotal = this.person.zsInvoice.money
        this.bizAccountBill.marchInfos[this.billIndex].travelPerson[this.personIndex] = this.person
        this.$store.commit('bizAccountBill', {
          marchInfos: this.bizAccountBill.marchInfos
        })
        this.$router.go(-1)
      }
    },
    caiBaoInvoiceCallBack (data) {
      this.person.zsInvoice.list = [].concat(this.person.zsInvoice.list, data.list)
      // this.person.zsInvoice.num = this.person.zsInvoice.list.length
      // let zsTotal = 0
      // this.person.zsInvoice.list.forEach(item => {
      //   zsTotal += Number(item.totalamount)
      // })
      // this.person.zsTotal = zsTotal
      this.countMoney()
      this.initPencent()
    },
    init () {
      this.billIndex = this.$route.query.billIndex
      this.personIndex = this.$route.query.personIndex
      let person = this.bizAccountBill.marchInfos[this.billIndex].travelPerson[this.personIndex]
      this.person = JSON.parse(JSON.stringify(Object.assign({}, this.person, person)))

      this.getTravelTripStandards()
      this.$nextTick(() => {
        this.initPencent()
      })
    },
    countMoney () {
      let money = 0
      let num = 0
      this.person.zsInvoice.list.forEach(item => {
        num++
        money += (+item.totalamount)
      })
      this.person.zsInvoice.money = money.toFixed(2)
      this.person.zsInvoice.num = num
      this.person.zsTotal = money.toFixed(2)
    },
    deleteInvoice (index) {
      this.person.zsInvoice.list.splice(index, 1)
      this.countMoney()
      this.initPencent()
    },
    getTravelTripStandards () {
      let marchInfo = this.bizAccountBill.marchInfos[this.billIndex]
      let person = marchInfo.travelPerson[this.personIndex]
      // console.log(person)
      getTravelTripStandards({
        userNum: person.userNum
      }, data => {
        let to = marchInfo.to.substring(0, 2)
        let zsBZ
        if (to === '广州') {
          zsBZ = data.zhuSuGZ
        } else if (to === '北京' || to === '上海') {
          zsBZ = data.zhuSuBJSH
        } else {
          zsBZ = data.zhuSuQT
        }
        let countDay = countDate(marchInfo.endDate, marchInfo.startDate)
        // console.log(marchInfo, marchInfo.endTime, marchInfo.startTime, data)
        // 计算住宿标准
        this.bizAccountBill.marchInfos[this.billIndex].travelPerson[this.personIndex].zsBZ = zsBZ * countDay
        this.person.zsBZ = zsBZ * countDay
      })
    },
    selectInvoice () {
      let hasSelectedList = this.person.zsInvoice.list
      this.bizAccountBill.marchInfos.forEach(marchInfo => {
        marchInfo.travelPerson.forEach(person => {
          if (person.userNum !== this.person.userNum) {
            hasSelectedList = [].concat(person.zsInvoice.list || [], hasSelectedList)
          }
        })
      })
      sessionStorage.setItem('hasSelectedList', JSON.stringify(hasSelectedList))
      this.$router.push({
        path: '/caiBaoStep2/caiBaoFeeZuSu/invoice',
        query: {
          JM: 'CB20',
          billIndex: this.billIndex,
          personIndex: this.personIndex
        }
      })
    },
    initPencent () {
      if (this.person.zsInvoice.list.length > 0) {
        this.$nextTick(() => {
          this.slidePencent = `${(this.swiper.activeIndex || 0) + 1}/${this.person.zsInvoice.list.length}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/caiBaoFee';
@import '../assets/css/config';
@import '../assets/css/mixins';
.invoice{
  background-color:#FFF;
  padding:0 .2rem;
  overflow-x: hidden;
  .head{
    color:$themeColor;
    height:.8rem;
    border-bottom:1px solid $borderColor;
  }
  .content{
    height:5.6rem;
  }
}
.icon-add-blue{
  margin-left:.1rem;
  width:.4rem;
  height:.4rem;
  @include bg-image('../assets/images/icon-add-blue');
}
.no-data{
  .icon-invoice-select{
    width:1.51rem;
    height:1.63rem;
    @include bg-image('../assets/images/icon-invoice-select')
  }
  .text{
    font-size:.26rem;
    padding-top:.2rem;
  }
}
.invoice-list{
  width:100%;
  height:4.3rem;
  position:relative;
}
.swiper-container {
  width:100%;
  height:3.6rem;
}
.swiper-slide{
  width:100%;
}
.num{
  position:absolute;
  bottom:0;
  right:.6rem;
  border-radius:.2rem;
  padding:.1rem;
  color:#FFF;
  background-color:#ddd;
}
.invoice-item{
  width:6.3rem;
  height:3.6rem;
  .head{
    width:100%;
    height:1.1rem;
    background-color:#cde3fc;
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    position:relative;
    font-size:.34rem;
    .date{
      position:absolute;
      bottom:.05rem;
      right:.6rem;
      color:#666;
      font-size:.2rem;
    }
    .icon-close{
      position:absolute;
      right:.2rem;
      top:.37rem;
      width:.36rem;
      height:.36rem;
      @include bg-image('../assets/images/icon-person-delete');
    }
  }
  .invoice-content{
    border:1px solid $themeColor;
    .line{
      height:.8rem;
      font-size:.24rem;
      color:#666;
      padding:0 .2rem;
      border-top:1px solid $borderColor;
      &:nth-of-type(1){
        border-top:none;
      }
      .left{
        border-right:1px solid $borderColor;
      }
      .right{
        padding-left:.2rem;
      }
    }
  }
}
</style>
